<template>
  <view class="create-event-page">
    <u-navbar
      title="创建专属时刻"
      :autoBack="true"
      bgColor="#fff"
    />
    
    <view class="create-content">
      <u-form ref="form" :model="eventForm" label-width="160rpx">
        <!-- 事件类型 -->
        <u-form-item label="事件类型" prop="type">
          <view class="type-selector">
            <view 
              v-for="type in eventTypes" 
              :key="type.value"
              class="type-item"
              :class="{ active: eventForm.type === type.value }"
              @click="selectType(type.value)"
            >
              <u-icon :name="type.icon" :color="type.color" size="32" />
              <text>{{ type.label }}</text>
            </view>
          </view>
        </u-form-item>
        
        <!-- 事件标题 -->
        <u-form-item label="事件标题" prop="title">
          <u-input 
            v-model="eventForm.title" 
            placeholder="给这个时刻起个名字"
            maxlength="30"
          />
        </u-form-item>
        
        <!-- 日期时间 -->
        <u-form-item label="日期时间" prop="datetime">
          <u-datetime-picker
            v-model="eventForm.datetime"
            mode="datetime"
            :show="showDateTimePicker"
            :min-date="minDate"
            :max-date="maxDate"
            @confirm="datetimeConfirm"
            @cancel="showDateTimePicker = false"
          />
          <view @click="showDateTimePicker = true">
            <u-input 
              v-model="formatDateTime" 
              placeholder="选择日期时间"
              readonly
            />
          </view>
        </u-form-item>
        
        <!-- 重要性 -->
        <u-form-item label="重要性" prop="importance">
          <view class="importance-selector">
            <view 
              v-for="level in importanceLevels" 
              :key="level.value"
              class="importance-item"
              :class="{ active: eventForm.importance === level.value }"
              @click="selectImportance(level.value)"
            >
              <u-icon :name="level.icon" :color="level.color" size="32" />
              <text>{{ level.label }}</text>
            </view>
          </view>
        </u-form-item>
        
        <!-- 描述 -->
        <u-form-item label="事件描述" prop="description">
          <u-textarea 
            v-model="eventForm.description" 
            placeholder="记录这个特殊时刻的细节"
            maxlength="200"
            height="200"
          />
        </u-form-item>
        
        <!-- 上传图片 -->
        <u-form-item label="上传图片" prop="images">
          <u-upload
            :fileList="eventForm.images"
            @afterRead="afterRead"
            @delete="deleteImage"
            name="images"
            multiple
            :maxCount="9"
            width="160"
            height="160"
          />
        </u-form-item>
        
        <!-- 提醒设置 -->
        <u-form-item label="提醒设置" prop="reminder">
          <view class="reminder-options">
            <u-checkbox-group v-model="eventForm.reminders">
              <u-checkbox 
                v-for="reminder in reminderOptions" 
                :key="reminder.value"
                :label="reminder.label" 
                :name="reminder.value"
              />
            </u-checkbox-group>
          </view>
        </u-form-item>
      </u-form>
      
      <!-- 创建按钮 -->
      <view class="create-button-section">
        <custom-button
          text="创建专属时刻"
          type="primary"
          size="large"
          :loading="creating"
          @click="createEvent"
        />
      </view>
    </view>
  </view>
</template>

<script>
import CustomButton from '@/components/custom-button/index.vue'

export default {
  name: 'CreateEvent',
  components: {
    CustomButton
  },
  data() {
    return {
      eventForm: {
        type: 'anniversary',
        title: '',
        datetime: new Date().getTime(),
        importance: 'medium',
        description: '',
        images: [],
        reminders: ['1day', '1hour']
      },
      showDateTimePicker: false,
      creating: false,
      eventTypes: [
        { value: 'anniversary', label: '纪念日', icon: 'calendar', color: '#ff4757' },
        { value: 'date', label: '约会', icon: 'heart', color: '#ff6b6b' },
        { value: 'birthday', label: '生日', icon: 'gift', color: '#ffa502' },
        { value: 'travel', label: '旅行', icon: 'plane', color: '#3742fa' },
        { value: 'special', label: '特殊', icon: 'star', color: '#2ed573' }
      ],
      importanceLevels: [
        { value: 'low', label: '一般', icon: 'minus', color: '#666' },
        { value: 'medium', label: '重要', icon: 'checkmark', color: '#ff9500' },
        { value: 'high', label: '非常重要', icon: 'plus', color: '#ff4757' }
      ],
      reminderOptions: [
        { value: '1week', label: '提前一周' },
        { value: '3day', label: '提前三天' },
        { value: '1day', label: '提前一天' },
        { value: '3hour', label: '提前三小时' },
        { value: '1hour', label: '提前一小时' }
      ]
    }
  },
  computed: {
    minDate() {
      return new Date().getTime() - 365 * 24 * 60 * 60 * 1000 // 一年前
    },
    maxDate() {
      return new Date().getTime() + 365 * 24 * 60 * 60 * 1000 // 一年后
    },
    formatDateTime() {
      if (!this.eventForm.datetime) return ''
      const date = new Date(this.eventForm.datetime)
      return `${date.getFullYear()}年${date.getMonth() + 1}月${date.getDate()}日 ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`
    }
  },
  methods: {
    selectType(type) {
      this.eventForm.type = type
    },
    
    selectImportance(level) {
      this.eventForm.importance = level
    },
    
    datetimeConfirm(e) {
      this.eventForm.datetime = e.value
      this.showDateTimePicker = false
    },
    
    afterRead(event) {
      const { file } = event
      this.eventForm.images.push(...file)
    },
    
    deleteImage(event) {
      const { index } = event
      this.eventForm.images.splice(index, 1)
    },
    
    async createEvent() {
      if (!this.eventForm.title.trim()) {
        uni.showToast({ title: '请输入事件标题', icon: 'none' })
        return
      }
      
      if (!this.eventForm.description.trim()) {
        uni.showToast({ title: '请输入事件描述', icon: 'none' })
        return
      }
      
      this.creating = true
      
      try {
        // 模拟创建事件
        await new Promise(resolve => setTimeout(resolve, 1500))
        
        // 这里应该调用API创建事件
        uni.showToast({
          title: '创建成功',
          icon: 'success'
        })
        
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)
      } catch (error) {
        uni.showToast({
          title: '创建失败',
          icon: 'none'
        })
      } finally {
        this.creating = false
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.create-event-page {
  min-height: 1334rpx;
  background: #f5f5f5;
}

.create-content {
  padding: 24rpx;
}

.type-selector {
  display: flex;
   margin-right: 16rpx; &:last-child { margin-right: 0; }
  flex-wrap: wrap;
}

.type-item {
  display: flex;
  flex-direction: column;
  align-items: center;
   margin-right: 8rpx; &:last-child { margin-right: 0; }
  padding: 24rpx 32rpx;
  background: #f8f8f8;
  border-radius: 16rpx;
  font-size: 24rpx;
  color: #666;
  
  &.active {
    background: rgba(255, 71, 87, 0.1);
    color: #ff4757;
    border: 2rpx solid #ff4757;
}
}

.importance-selector {
  display: flex;
   margin-right: 16rpx; &:last-child { margin-right: 0; }
  flex-wrap: wrap;
}

.importance-item {
  display: flex;
  align-items: center;
   margin-right: 8rpx; &:last-child { margin-right: 0; }
  padding: 16rpx 32rpx;
  background: #f8f8f8;
  border-radius: 24rpx;
  font-size: 26rpx;
  color: #666;
  
  &.active {
    background: rgba(255, 149, 0, 0.1);
    color: #ff9500;
    border: 2rpx solid #ff9500;
}
}

.reminder-options {
  display: flex;
  flex-direction: column;
   margin-right: 16rpx; &:last-child { margin-right: 0; }
}

.create-button-section {
  margin-top: 80rpx;
  padding: 0 40rpx;
}
</style>